<template>
    <div class="ershou">
        <shop-title></shop-title>
        <div class="title">
            <van-row>
                <van-col span="4">家用电器</van-col>
                <van-col span="18"></van-col>
                <van-col span="2">更多</van-col>
            </van-row>
        </div>
        <div class="card">
            <van-row>
                <van-col span="6">
                    <img src="../../../assets/Secondhandimg/1.jpg" alt="" />
                    <div>电视</div>
                </van-col>
                <van-col span="6">
                    <img src="../../../assets/Secondhandimg/2.jpg" alt="" />
                    <div>冰箱</div>
                </van-col>
                <van-col span="6">
                    <img src="../../../assets/Secondhandimg/3.jpg" alt="" />
                    <div>洗衣机</div>
                </van-col>
                <van-col span="6">
                    <img src="../../../assets/Secondhandimg/4.jpg" alt="" />
                    <div>空调</div>
                </van-col>
            </van-row>
        </div>

        <div class="title">
            <van-row>
                <van-col span="4">家用家具</van-col>
                <van-col span="18"></van-col>
                <van-col span="2">更多</van-col>
            </van-row>
        </div>
        <div class="card">
            <van-row>
                <van-col span="6">
                    <img src="../../../assets/Secondhandimg/1.jpg" alt="" />
                    <div>沙发</div>
                </van-col>
                <van-col span="6">
                    <img src="../../../assets/Secondhandimg/2.jpg" alt="" />
                    <div>桌椅</div>
                </van-col>
                <van-col span="6">
                    <img src="../../../assets/Secondhandimg/3.jpg" alt="" />
                    <div>柜子</div>
                </van-col>
                <van-col span="6">
                    <img src="../../../assets/Secondhandimg/4.jpg" alt="" />
                    <div>照明</div>
                </van-col>
            </van-row>
        </div>

        <div class="title">
            <van-row>
                <van-col span="4">热门推荐</van-col>
                <van-col span="18"></van-col>
                <van-col span="2"></van-col>
            </van-row>
        </div>
        <div class="hot">
            <ul class="clearfix">
                <li v-for="item in list" :key="item.id" @click="getGoodsId(item.id)">
                    <!-- <router-link to="xiangqin"> -->
                    <img src="../../../assets/shopcartimg/1.jpg" alt="" />
                    <div>{{item.name}}</div>
                    <div class="red"> {{item.price}} </div>
                    <!-- </router-link> -->
                </li>
                <!-- <li>
                    <img src="../../../assets/shopcartimg/2.jpg" alt="" />
                    <div>简约欧式</div>
                    <div class="red">￥3299</div>
                </li>
                <li>
                    <img src="../../../assets/shopcartimg/1.jpg" alt="" />
                    <div>雅阁粉系床</div>
                    <div class="red">￥1299</div>
                </li>
                <li>
                    <img src="../../../assets/shopcartimg/2.jpg" alt="" />
                    <div>简约欧式</div>
                    <div class="red">￥3299</div>
                </li> -->
                
            </ul>
        </div>
    </div>
</template>

<script>
import shopTitle from "../../../components/shoptitle.vue";
import {
    getgoods
} from '../../../api/index'
export default {
    data() {
        return {
            list:[]
        };
    },
    components: {
        shopTitle,
    },
    methods:{
        async init(){
            let obj = await getgoods()
            // console.log(obj);
            this.list = obj.data.data
        },
        getGoodsId(id){
            // console.log(id);
            this.$store.commit('getxiangqinGoodsId',id)
            
            this.$router.push({path:'xiangqin'})
            
        }
    },
    created(){
        this.init()
    }
};
</script>
<style scoped lang='less'>
.ershou {
    background-color: #efefef;
    min-height: 1226.06px;
}
.title {
    padding: 20px 20px 0 20px;
    .van-row {
        font-size: 20px;
    }
}
.card {
    width: 710px;
    height: 180px;
    margin: auto;
    background-color: white;
    border-radius: 10px;
    margin-top: 20px;
    .van-col {
        height: 180px;
        text-align: center;
        img {
            width: 100px;
            height: 60px;
            margin-top: 50px;
        }
        div {
            font-size: 18px;
            margin-top: 15px;
            color: rgba(000, 000, 000, 0.7);
        }
    }
}
.hot {
    ul {
        li {
            width: 345px;
            // height: ;
            float: left;
            margin-left: 20px;
            font-size: 20px;
            background-color: #fff;
            margin-top: 20px;
            img {
                width: 345px;
                height: 200px;
                vertical-align: top;
            }
            div{
                margin-top: 20px;
            }
            .red{
                color: red;
                margin-bottom: 30px;
            }
        }
    }
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
</style>